<script setup lang="ts">
const props = defineProps({
  handleClose: {
    type: Function,
  },
});
const dialog = ref({
  centerDialogVisible: true,
  fullscreen: false,
});
const toggleDialog = (bool: boolean) => {
  dialog.value.centerDialogVisible = bool;
};
const click_full = () => {
  dialog.value.fullscreen = !dialog.value.fullscreen;
  if (dialog.value.fullscreen) {
    strH.value = "0px";
  } else {
    strH.value = "25vh";
  }
  getClientH();
};
const strH = ref("25vh");
const clientHeight = ref();
const getClientH = () => {
  clientHeight.value = `calc(${document.documentElement.clientHeight}px  - ${strH.value} - 64px - 16px)`;
};
onMounted(() => {
  getClientH();
  window.onresize = function () {
    getClientH();
  };
});
const handleClose = () => {
  props.handleClose();
};
defineExpose({ toggleDialog, click_full });
</script>
<template>
  <div class="text-preview">
    <el-dialog
      v-model="dialog.centerDialogVisible"
      title="Notice"
      width="500"
      destroy-on-close
      center
      @close="handleClose"
      :show-close="false"
      :fullscreen="dialog.fullscreen"
      :style="{ '--maxHeight': clientHeight }"
      draggable
      :key="clientHeight"
    >
      <template #header>
        <div class="my-header">
          <el-icon @click.stop="click_full"><FullScreen /></el-icon>
          <el-button @click="toggleDialog(false)">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </div>
      </template>
      <slot
        :toggleDialog="toggleDialog"
        :click_full="click_full"
        :clientHeight="clientHeight"
      ></slot>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.text-preview {
  .text {
    padding-right: 10px;
  }

  .my-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }
}
</style>
